.hide { display: none !important; }
.show { display: inherit; }

.hidden { visibility: hidden; }

.sm-show,
.md-show,
.lg-show,
.xl-show { display: none; }

/* extra-small */

@media screen and (--breakpoint-min-xs) {
  .xs-hide { display: none !important; }
}
@media screen and (--breakpoint-min-xs) {
  .xs-show { display: inherit !important; }
}

/* small */

@media screen and (--breakpoint-min-sm) {
  .sm-hide { display: none !important; }
}
@media screen and (--breakpoint-min-sm) {
  .sm-show { display: inherit !important; }
}

/* medium */

@media screen and (--breakpoint-min-md) {
  .md-hide { display: none !important; }
}
@media screen and (--breakpoint-min-md) {
  .md-show { display: inherit !important; }
}
/* large */

@media screen and (--breakpoint-min-lg) {
  .lg-hide { display: none !important; }
}
@media screen and (--breakpoint-min-lg) {
  .lg-show { display: inherit !important; }
}

/* xl */
@media screen and (--breakpoint-min-xl) h{
  .xl-hide { display: none !important; }
}
@media screen and (--breakpoint-min-xl) {
  .xl-show { display: inherit !important; }
}
